<template>
  <div class="outmain ba_f heighthv pad_20 bor_rad5">
    <div class="maintitle">微页面</div>
    <div class="tabledata mar_t20">
      <el-table
              :data="list"
              v-loading="listLoading"
              :element-loading-text="elementLoadingText"
              stripe
              style="width: 100%"
      >
        <el-table-column
                prop="sort"
                label="排序"
        >
        </el-table-column>
        <el-table-column
                prop="name"
                label="页面名称"
        >
        </el-table-column>
        <el-table-column
                prop="name"
                label="页面类型"
        >
        </el-table-column>
        <el-table-column
                prop="time"
                label="修改时间"
        >
        </el-table-column>
        <el-table-column
                prop="display"
                label="状态"
        >
          <template slot-scope="scope">
            <el-switch v-model="scope.row.display" active-value="1" inactive-value="2"
                       @change="changeSwitch(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column
                label="操作"
        >
          <template slot-scope="scope">
            <div class="flex">
              <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
              background
              layout="prev, pager, next"
              :total="page.total"
              :page-size="page.pagesize"
              :current-page.sync='page.currentPage'
              @current-change="handleCurrentChange">
      </el-pagination>
      <edit ref="edit" @fetchData="fetchData"></edit>
    </div>
  </div>
</template>
<script>
  import {getLabelList, changeLabel, labelDel} from "@/api/good";
  export default {
    data () {
      return {
        list: [],
        // listLoading: true,
        selectRows: "",
        elementLoadingText: "正在加载...",
        page: {
          total: 0,
          size: 10,
          currentPage: 1,
        },
      }
    },
    methods: {
      async fetchData() {
        this.listLoading = true;
        const {data, count} = await getLabelList({page: this.page.currentPage});
        this.list = data;
        this.page.total = count;
        setTimeout(() => {
          this.listLoading = false;
        }, 100);
      },
      handleCurrentChange(val) {
        this.page.currentPage = val;
        this.fetchData();
      },
    }
  }
</script>
